<script setup lang="ts">
import { EyeOutlined, LikeOutlined } from '@ant-design/icons-vue'
import { useArticleStore } from '@/common/stores/modules/article'
import { useUserStore } from '@/common/stores/modules/users-store'
import { useRouter } from 'vue-router'
const router = useRouter()

const articleStore = useArticleStore()
const userstore = useUserStore()

// 定义一个变量来存储点击获取到的文章唯一ID值
const clickedArticleId = ref()

const handleArticleDetailClick = (articleId: string) => {
  clickedArticleId.value = articleId
  console.log('获取到的文章唯一ID值：', clickedArticleId.value)
  console.log('checkedarticlid:', clickedArticleId.value)

  router.push(`/articledetails/${articleId}`)
}


</script>

<template>
  <!-- 判断是否有数据 -->
  <div v-if="articleStore.articles && articleStore.articles.length > 0">
    <div
      class="article"
      @click="handleArticleDetailClick(article.id)"
      v-for="(article, index) in articleStore.articles"
      :key="article.id"
    >
      <div class="image">
        <img class="image-publish" :src="article.coverImage" alt="" />
      </div>
      <div class="content">
        <p>{{ article.title }}</p>
        <p class="description">
          {{ article.content }}
        </p>
        <div class="author">
          <div>
            <span class="spans">作者：{{ userstore.userInfo?.user }}</span>
            <span class="spans">|</span>
            <span class="spans">
              <EyeOutlined />
              {{ article.views }}
            </span>
            <span class="spans">
              <LikeOutlined />
              {{ article.support }}
            </span>
          </div>
          <button>{{ article.classify }}</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 没有时显示空状态 -->
  <div v-else class="aempty">
    <a-empty description="暂无数据" />
  </div>
</template>

<style scoped lang="scss">
.article {
  display: flex;
  justify-content: space-between;
  margin: 1.25rem;
  cursor: pointer;

  p {
    margin: 0;
  }

  .image {
    width: 15%;
    height: 6.25rem;
    object-fit: contain;

    &-publish {
      width: 100%;
      height: 100%;
      border-radius: 0.3125rem;
    }
  }

  .content {
    width: 82%;
    padding: 0.625rem 0;

    p:first-child {
      overflow: hidden;
      font-size: 1.25rem;
      font-weight: bold;
      color: #333;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .description {
      margin: 0.5rem 0;
      overflow: hidden;
      font-size: 0.875rem;
      color: #999; // 调整描述文字颜色，使其与整体风格更搭
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .author {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .spans {
        margin-right: 0.625rem;
        font-size: 0.75rem;
        color: #999;
      }

      button {
        padding: 0.25rem;
        font-size: 0.75rem;
        color: #999;
        border: none;
      }
    }
  }
}

.aempty {
  margin-top: 3.125rem;
}
</style>
